<template>
	<view class="container">
		<!-- 内容区域 -->
		<view class="content">
			<!-- 微信图标 -->

			<!-- 标题 -->
			<text class="title">微信绑定</text>

			<!-- 说明文字 -->
			<text class="desc">绑定微信后可使用微信快捷登录\n并接收重要通知</text>
		</view>

		<!-- 底部按钮 -->
		<view class="btn-container">
			<button class="save-btn" @tap="handleSave">立即绑定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getUserOpenid,
		getChangeUserOpenId
	} from '@/api/login.js'


	const handleSave = () => {
		// 这里添加绑定微信的逻辑
		uni.showToast({
			title: '绑定中',
			icon: 'none'
		})

		uni.login({
			provider: 'weixin', //使用微信登录
			success: function(option) {
				console.log(option.code);

				if (option.code) {
					getUserOpenid(option.code).then((res) => {
						console.log(res);

						if (res.open_id) {
							getChangeUserOpenId(res.open_id).then((option2) => {
								console.log(option2);

								if (option2.message == '绑定成功') {
									uni.showModal({
										title: '提示',
										content: '绑定成功'
									})
									return
								}

								uni.showModal({
									title: '提示',
									content: '绑定成功'
								})
							})
						} else {
							uni.showModal({
								title: '提示',
								content: 'openid失效'
							})
						}
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '微信绑定失败'
					})

				}
			}
		});
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.wechat-icon {
		background: #ffffff;
		border-radius: 50%;
		padding: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(9, 190, 79, 0.15);
	}

	.title {
		font-size: 36rpx;
		color: #333;
		font-weight: 600;
		margin: 40rpx 0 20rpx;
	}

	.desc {
		font-size: 28rpx;
		color: #666;
		text-align: center;
		line-height: 1.8;
	}

	.btn-container {
		padding: 40rpx;
		background: #fff;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.save-btn {
		background: #09BE4F;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		transition: all 0.3s;

		&:active {
			background: #08A745;
			transform: scale(0.98);
		}
	}
</style>